<template>
	<view class="content">
		<navBar>
			<template @click="backPage()" slot='left'>
				<u-icon name="arrow-left" color="#fff"></u-icon>
			</template>
			<template class="centerText" slot='center'>
				<view class="" style="color: #fff;">
					物料盘点
				</view>
			</template>
		</navBar>
		<view class="top_box">
			<view class="title">
				录入信息 快捷完成盘点
			</view>
			<view class="procedure">
				<u-steps :current="computeCurrent">
					<u-steps-item title="扫描/选择物料">
					</u-steps-item>
					<u-steps-item title="填写实际库存数"></u-steps-item>
					<u-steps-item title="提交"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<!-- 信息录入 -->
		<view class="information_entry">
			<!-- <u-read-more  :showHeight="200" ref="uReadMore"  @load="load" > -->
			<u--form labelPosition="left" ref="uForm" labelWidth='80' :model="formData">
				<u-form-item required label="盘点仓库" borderBottom ref="item1">
					{{stashInfo.ware_name}}
				</u-form-item>

				<!-- <u-form-item @click="selectSupplierPopup()" required label="供应商" prop="formData.supplier_id"
					borderBottom ref="item1">
					{{supplier_name}}
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item @click="selectPutInPopup()" required label="入库类型" prop="formData.receipt_type" borderBottom
					ref="item1">
					{{dict_label}}
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item> -->
				<!-- <template v-if="loadMoreFlag"> -->
				<u-form-item label="盘点日期" borderBottom ref="item1" @click="showDate()">
					{{ $u.timeFormat(formData.apply_time, 'yyyy-mm月-dd日') }}
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<template v-if="loadMoreFlag">
					<u-form-item label="备注信息" borderBottom>
						<u--textarea v-model="formData.remark" maxlength="50" count placeholder="请输入内容"></u--textarea>
					</u-form-item>
				</template>
				<!-- </template> -->
				<loadMore :loadMoreFlag.sync='loadMoreFlag'></loadMore>
			</u--form>
			<!-- </u-read-more> -->
		</view>
		<view class="scan_code">
			<view @click="scanCode()" class="left_box">
				<image src="../../static/images/saoma.png" mode=""></image>
				<view>扫描条码 快速识别物料</view>
			</view>
			<view class="right_box" @click="manualSelection()">
				<image src="../../static/images/shoudong.png" mode=""></image>
				<view>手动添加</view>
			</view>
		</view>
		<!-- 物料清单 -->
		<view class="cargo_list">
			<view
				style=" display: flex;justify-content: space-between; align-items: center; padding-bottom: 30rpx; border-bottom: 1rpx solid #dadbde">
				<text class="big_title">物料盘点清单</text>
				<text class="tips">左滑移除</text>
			</view>
			<view class="empty_box" @click="manualSelection()" v-if="cartList.length == 0">
				<u-empty text="点击添加需要盘点的物料">
				</u-empty>
			</view>
			<!-- 商品列表 -->
			<goodsItem @change='change()' v-else></goodsItem>
		</view>
		<!-- 提交 -->
		<view class="bottom_box">
			<view @click="submit()" class="submit_btn">
				<u-button color="#39cccc" shape='circle' type="primary" text="提交"></u-button>
			</view>
		</view>

		<!-- 年月日选择 -->
		<u-datetime-picker title="盘点日期" ref="datetimePicker" :show="show" v-model="formData.apply_time" mode="date"
			:formatter="formatter" @cancel="show = false" @confirm="show = false"></u-datetime-picker>
		<!-- 手动选择弹出层 -->
		<manualSelectionPopup ref="selectPopup" :show.sync="showManualSelectionPopup"></manualSelectionPopup>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import manualSelectionPopup from '@/components/manualSelectionPopup.vue';
	import goodsItem from '@/components/goodsItem.vue';
	import loadMore from '@/components/loadMore.vue'
	import {
		cargoInventoryApi
	} from '@/api/categoryManage.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					apply_time: Number(new Date()),
					ware_id: this.$store.state.user.stashInfo.ware_id, //仓库ID
					status: 1,
					remark: "", //备注
				},
				show: false,
				showManualSelectionPopup: false, //手动选择
				loadMoreFlag: false
				// goodsItemList: this.$store.state.cart.cart
			};
		},
		onUnload() {
			this.clearCart()
		},
		computed: {
			computeCurrent() {
				return this.cartList.length > 0 ? 1 : 0
			},
			...mapGetters([
				'cartList',
				'stashInfo'
			])
		},
		watch: {

		},
		components: {
			navBar,
			manualSelectionPopup,
			goodsItem,
			loadMore
		},
		methods: {
			//滑动后删除更新列表
			change() {
				this.$refs.selectPopup.setList()
			},
			...mapMutations('cart', ['clearCart']),
			backPage() {
				if (this.cartList.length == 0) return uni.navigateBack()
				const that = this
				uni.showModal({
					content: '数据还没有提交确定退出吗',
					success: function(res) {
						if (res.confirm) {
							that.clearCart()
							uni.navigateBack();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			load() {
				this.$refs.uReadMore.init();
			},
			showDate() {
				this.show = true;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				return value;
			},
			scanCode() {
				const that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: async (e) => {
						const goods_no = e.result
						that.$refs.selectPopup.pageInfo.goods_no = e.result
						await that.$refs.selectPopup.getGoodsById()
						that.$refs.selectPopup.pageInfo.goods_no = ''
						if (that.$refs.selectPopup.goodsList.length == 0) {
							uni.$u.toast('暂无此物料')
							setTimeout(async () => {
								await that.$refs.selectPopup.getGoodsById()
							}, 500)
							return
						}
						that.$refs.selectPopup.addGoods(that.$refs.selectPopup.goodsList[0])
						await that.$refs.selectPopup.getGoodsById()
					},
					fail(err) {
						uni.$u.toast('扫描失败请重新扫码')
					}
				});
			},
			manualSelection() {
				this.showManualSelectionPopup = true;
			},
			//选择供应商
			selectSupplierPopup() {
				this.showPopup = true
			},
			//入库类型
			selectPutInPopup() {
				this.putInStoragePopup = true
			},
			//提交
			async submit() {
				console.log(this.cartList);
				// await this.$refs.uForm.validate()
				if (this.cartList.length == 0) return uni.$u.toast('请选择要盘点的物料')
				const detaliList = this.cartList.map(item => {
					const obj = {
						goods_id: item.goods_id,
						goods_name: item.goods_name,
						quantity: item.goods_num,
						check_quantity: item.quantity,
						price: item.price,
					}
					return obj
				})
				this.formData.apply_time = this.formData.apply_time + ''
				this.formData = {
					...this.formData,
					details: detaliList,
				}
				await cargoInventoryApi(this.formData)
				setTimeout(() => {
					uni.$u.toast('盘点成功')
				}, 500)
				this.formData = {
					apply_time: Number(new Date()),
					ware_id: this.$store.state.user.stashInfo.ware_id, //仓库ID
					status: 1,
					remark: "", //备注
				}
				this.clearCart()
				this.change()
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #b3d7ff;
		min-height: 100vh;

		.top_box {
			height: 200rpx;

			.title {
				margin: 40rpx 0 20rpx 60rpx;
				font-size: 40rpx;
				font-weight: 600;
			}

			::v-deep .u-steps-item__wrapper--row {
				background-color: #b3d7ff;
			}
		}

		.information_entry {
			background-color: #fff;
			margin: 0 10rpx;
			padding: 30rpx 20rpx;
			border-radius: 20rpx;

			::v-deep .u-form-item__body__left {
				margin-left: 20rpx;
			}
		}

		.scan_code {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			border-radius: 20rpx;
			margin: 10rpx;
			padding: 40rpx;
			font-size: 30rpx;

			.left_box {
				display: flex;
				align-items: center;
				height: 90rpx;

				image {
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
				}

			}

			.right_box {
				display: flex;
				align-items: center;
				border-left: 1px solid #32a3df;
				height: 90rpx;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
				}

			}
		}

		.cargo_list {
			background-color: #fff;
			border-radius: 20rpx;
			min-height: 500rpx;
			margin: 0 10rpx;
			padding: 20rpx;
			margin-bottom: 170rpx;

			.big_title {
				font-weight: 700;
				font-size: 35rpx;

			}

			.tips {
				margin-left: 40rpx;
				font-size: 25rpx;
				color: #f9b85c;
			}

			.empty_box {
				margin: 40rpx 0;
			}
		}

		.bottom_box {
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 99;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 160rpx;
			background-color: #f0f3f8;

			.submit_btn {
				width: 600rpx;
			}
		}
	}
</style>